<template>
   <el-calendar v-model="value" ><template #date-cell="{ data }">
            <div style="width:100%;height: 100%;" @click="SettingTodo(data.day)">
                <div>{{ data.day }}</div>
                <div>
                    {{ read(data.day) }}
                </div>
            </div>
        </template></el-calendar>
        <el-dialog v-model="dialogFormVisible" title="添加待办项" style="width:500px;" draggable>
        <el-form :model="form" ref="formRef">
            <el-form-item label="要做的事" label-width="90px" prop="todo">
                <el-input v-model="form.todo" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="Cancel(formRef)">Cancel</el-button>
                <el-button type="primary" @click="Submit(formRef)">
                    Confirm
                </el-button>
            </span>
        </template>
    </el-dialog>
   
</template>
<script lang="ts" setup>
// import IconCom from '../../components/IconCom.vue';
import { ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus';
const value = ref(new Date())
const form = ref({
  day:"",
  todo:""
})
const tolist=ref([{
        day: "2025-02-08",
        todo: "Vue3+.NET7招聘网站实战课"
    },
    {
        day: "2025-02-09",
        todo: "SignalR在线聊天室"
    },
    {
        day: "2025-02-10",
        todo: "Vue3项目实战"
    },
    {
        day: "2025-02-11",
        todo: "Vue3项目实战"
    }])
const read=(day:string)=>{
  return tolist.value.find(p=>p.day==day)?.todo
}
const dialogFormVisible = ref(false)
const SettingTodo=(day:string)=>{
  dialogFormVisible.value=true
  form.value.day=day
  let val=tolist.value.find(p=>p.day==day)?.todo
  form.value.todo=val==undefined?"":val
}
const formRef = ref<FormInstance>()
const Submit=(formRef:FormInstance|undefined)=>{
  dialogFormVisible.value=false
  let info=tolist.value.find(p=>p.day==form.value.day)
  if(info==undefined){
    tolist.value.push({
      day:form.value.day,
      todo:form.value.todo
    })
  }else{
    tolist.value.forEach((p)=>{
      if(p.day==form.value.day){
        p.todo=form.value.todo
      }
      
    })
  }
  formRef?.resetFields()
}
const Cancel=(formRef:FormInstance|undefined)=>{
  dialogFormVisible.value=false
  formRef?.resetFields()
}
</script>
